* {
  margin: 0;
  padding: 0;
  touch-action: pan-x pan-y !important;
  pointer-events: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  // font-family: $mainFont;
}

html{
  font-family: 'GameFont', sans-serif !important;

  &.GameFont{
    font-family: 'GameFont', sans-serif !important;
  }
  &.GameFont2{
    font-family: 'GameFont2', sans-serif !important;
  }
  &.GameFont3{
    font-family: 'GameFont3', sans-serif !important;
  }
}

html,
body{
  overscroll-behavior: contain;
  overflow: hidden;
  font-synthesis: none;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  scrollbar-width: 6px;
  scrollbar-face-color: #888;
  scrollbar-track-color: rgba(255, 255, 255, 0.1);
  scrollbar-color: #cdd0d4 rgba(#000, 0.05);
}

html{
  background: $mainBgColor;
}

body{
  color: #555;
  user-select: none;
  background: inherit !important;

  word-wrap: break-word;
  text-rendering: optimizeLegibility;
  @include Text;
}

// Scrollbar
::-webkit-scrollbar {
  @include S(width, 6px);
  @include S(height, 6px);
}

::-webkit-scrollbar-track {
  background: rgba(#000, 0.05);
}

::-webkit-scrollbar-thumb {
  // border-radius: 4px;
  @include S(border-radius, $globalBorderRadius);
  background: #cdd0d4;
}

::-webkit-scrollbar-thumb:hover {
  background: #d8dce0;
}

img{
  -webkit-touch-callout: none;
}

i {
  font-style: normal;
}
b,
strong {
  font-weight: normal;
}
u,
a {
  text-decoration: none;
}
input,
textarea,
select {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
}

button{
  background: transparent;
  border: 0;
  pointer-events: all;
  cursor: pointer;
  position: relative;
  @include TextShadow;
}

.min-text{
  color: #888;
  @include S(font-size, 12px);
}

.text-circle{
  display: inline-block;
  width: 3px;
  height: 3px;
  background: #999;
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 5px;
}

.remove{
  display: none !important;
}

.btn-border{
  border: #{D(1px)} solid rgba(0, 10, 20, .2) !important;
  @include S(border-bottom-width, 2px);
  @include BoxShadow3D($colorBlueBright);
}

.styledButton{
  background: $themeColor;
  text-transform: uppercase;
  box-sizing: content-box;
  position: relative;
  @include S(padding, 3px, 10px);
  @include IncreasedClickArea(10px);
  @include BorderRadius(4px);
  @include ButtonText;
  @include BoxShadow3D($colorBlueBright); 
  border: #{D(1px)} solid rgba(0, 10, 20, .2);
  @include S(border-bottom-width, 2px);
  color: #fff;
  letter-spacing: .05em !important;
  @include BoxShadow(0, 1, 2, 0, rgba(0, 10, 20, .2));
  transition: .2s;
  pointer-events: all;
  cursor: pointer;

  @include onPe{
    @include S(padding, 6px, 10px);
  }
}
.styledButton.success{
  color: #fff;
  background: $colorGreenBright;
}
.styledButton.info{
  color: #fff;
  background: $colorBlueBright;
}
.styledButton.warning{
  color: #fff;
  background: $colorYellowBright;
}
.styledButton.danger{
  color: #fff;
  background: $colorRedBright;
}
.styledButton.white{
  background: #fff;
  color: $accentColorDark;
}

::selection {
  color: white;
  background: $colorGreenBright; /* WebKit/Blink Browsers */
}
::-moz-selection {
  color: white;
  background: $colorGreenBright; /* Gecko Browsers */
}

a {
  color: $themeColor;
}

button,
input,
select,
textarea,
a {
  &:focus {
    outline: none;
  }
  font-family: inherit;
  font-weight: inherit;
  pointer-events: all;
}

.gameState.prefab_LoadingState{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .loadingImage{
    background: uiResource('loading.svg') center center / #{D(60px)} no-repeat;
    width: 100%;
    display: flex;
    flex-grow: 1;
  }

  .loadingStatus{
    position: absolute;
    @include S(left, 20px);
    @include S(right, 20px);
    @include S(bottom, 30px);
    @include Text;
    color: #aaa;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    > .bar{
      display: none;
      @include S(margin-top, 15px);
      width: 80vw;
      background: lighten($color: $mainBgColor, $amount: 10);
      height: 2px;
      position: relative;
      color: #fff;

      .inner{
        position: absolute !important;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1;
        background: $themeColor;
        @include BorderRadius(4px);

        transform-origin: 0 50%;

        @include InlineAnimation(1.3s ease-in-out infinite){
          0%, 100%{
            background-color: darken($color: $themeColor, $amount: 5);
            transform: none;
          }
          50%{
            background-color: darken($color: $themeColor, $amount: 10);
            transform: scale(1.01);
          }
        }
      }

      .status{
        // display: none;
        position: relative;
        z-index: 2;
        display: inline-flex;
        @include S(padding, 5px);
        @include PlainText;
      }
    }
  }
}

.prefab_GameHint{
  position: absolute;
  @include S(left, 20px);
  @include S(right, 20px);
  @include S(bottom, 60px);
  @include Text;
  color: #666;
  text-align: center;
}

canvas{
  pointer-events: all;
  image-rendering: auto;
  letter-spacing: 0 !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.spritesheetImage{
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  z-index: 1;
}

.prefab_LoadingTextWithAnim{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  @include Text;
  opacity: 1;
  z-index: 20;
  color: #393747;
  &::after{
    content: " ";
    @include S(width, 45px);
    @include S(height, 45px);
    display: inline-block;
    vertical-align: middle;

    &{
      background: uiResource('loading.svg') center center/contain no-repeat;
    }
  }

  @include InlineAnimation(1.5s ease-in-out infinite){
    50%{
      transform: scale(1.2) rotate(160deg);
    }
  }
}

.pressed:not(.noPressEffect) {
  transform: scale(0.98) !important;
  animation: none !important;
}

.pressedSmallElement:not(.noPressEffect) {
  transform: scale(0.88) !important;
  animation: none !important;
}

.modalDialogParent{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 101;
}

input.rangeInput {
  cursor: pointer;
  background-color: transparent;
  outline: none;
  @include S(max-width, 60px);
  @include S(height, 8px);

  &::-webkit-slider-runnable-track {
    background-color: darken($mainBgColor, 3);
    color: darken($mainBgColor, 3);
    // @include S(height, 16px);
    @include S(border-radius, 8px);
    outline: none;
  }

  @include DarkThemeOverride {
    &::-webkit-slider-runnable-track {
      background-color: $darkModeControlsBackground;
    }

    &::-webkit-slider-thumb {
      box-shadow: inset 0 0 0 D(10px) #eee;
    }
  }

  &::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    box-shadow: inset 0 0 0 D(10px) $themeColor;
    border-radius: 50% !important;
    outline: none;
    transition: box-shadow 0.3s;
  }

  &:hover {
    &::-webkit-slider-thumb {
      box-shadow: inset 0 0 0 D(10px) lighten($themeColor, 15);
    }
  }
}

input[type="text"],
input[type="email"] {
  @include S(padding, 10px);
  width: 100%;
  box-sizing: border-box;
  border: 0;
  background: #eeeff5;
  @include S(border-radius, $globalBorderRadius);
  color: #888;
  @include Text;

  &::placeholder{
    color: #888;
    opacity: .4;
  }
}

.checkbox {
  $bgColor: darken($mainBgColor, 3);
  background-color: $bgColor;
  @include S(width, 35px);
  @include S(height, 17px);
  display: flex;
  @include S(padding, 3px);
  box-sizing: content-box;
  cursor: pointer;
  pointer-events: all;
  transition: opacity 0.2s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.4s ease-in-out !important;
  position: relative;
  @include BorderRadius(20px);
  @include IncreasedClickArea(10px);
  &.loading {
    opacity: 0.2;
  }
  &:hover {
    background-color: darken($bgColor, 5);
  }
  .knob {
    @include S(width, 20px);
    @include S(height, 17px);
    display: inline-block;
    transition: margin-left 0.4s ease-in-out !important;
    background: #fff;
    position: relative;
    @include BorderRadius(20px);
    @include BoxShadow3D(#fff, $size: 1px);
  }
  &.checked {
    background-color: $themeColor;
    @include BoxShadow3D($themeColor, $size: 2px);
    .knob {
      @include S(margin-left, 15px);
    }
    &:hover {
      background-color: lighten($themeColor, 15);
    }
  }

  @include DarkThemeOverride {
    background-color: $darkModeGameBackground !important;
    &.checked {
      background-color: $colorBlueBright !important;
    }
  }
}

.tag{
  background: $colorBlueBright;
  color: white;
  border-radius: 5px;
  padding: 2px 5px;
  display: inline-block;
  margin-bottom: 3px;
  @include PlainText;

  &.success{
    background: $colorGreenBright;
  }
  &.error{
    background: $colorRedBright;
  }
  &.dark{
    background: $accentColorDark;
  }
  &.warning{
    background: $colorYellowBright;
  }
}

@for $i from 1 through 5 {
  .mt-#{$i}{
    @include S(margin-top, $i * 10px);
  }
}

.mb-1{
  @include S(margin-bottom, 10px);
}

.enum{
  background: rgb(247, 247, 247);
  @include PlainText;
  display: flex;
  align-items: flex-start;
  pointer-events: all;
  cursor: pointer;
  justify-content: center;
  @include S(min-width, 50px);
  @include S(border-radius, $globalBorderRadius);
  @include S(padding, 6px);
  @include S(padding-right, 15px);

  background: rgb(230, 231, 236) uiResource('icons/selector.png') calc(100% - #{D(5px)}) calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;

  transition: background-color .12s ease-in-out;
  &:hover{
    background-color: #e0e2eb;
  }
}

.text-default{
  color: #777; 
}
.text-danger{
  color: $colorRedBright;
}
.text-success{
  color: $colorGreenBright;
}
.text-primary{
  color: $colorBlueBright;
}
.text-warning{
  color: $colorYellowBright;
}

.level1{
  border-left: 6px solid rgba(187, 187, 187, 0.8) !important;
}
.level2{
  border-left: 6px solid rgba(25, 197, 39, 0.514) !important;
}
.level5{
  border-left: 6px solid rgba(255, 133, 19, 0.8) !important;
}